<template>
	<view :style="{ height: conentHeight + 'px;' }">
		<view class="top-height">
			<view class="page-top-box">
				<view class="search-box flex ac">
					<u-search borderColor="#DADADA" bgColor="#ffffff" placeholder="搜索项目名称" v-model="searchForm.project_name"
						:showAction="false" @search="searchFunc" @clear="searchFunc"></u-search>
					<view class="search-btn flex ac" @click="searchShow = true" :style="searchShow ? 'color:#3B75FF;' : ''">
						筛选
						<text class="iconfont icon-shaixuan" :style="searchShow ? 'color:#3B75FF;' : ''"></text>
					</view>
				</view>
			</view>
		</view>
		<view class="list-content-box" :style="{ height: 'calc(100% - ' + topHeight + 'px);' }">
			<z-paging ref="paging" :fixed="false" v-model="dataList" @query="queryList"
				:paging-style="{ 'background-color': '#f7f7f7', height: '100%', width: '100%' }">
				<template slot="empty">
					<u-empty icon="https://hzybucket.obs.cn-south-1.myhuaweicloud.com/we_chat/no-msg2.png" text=" "></u-empty>
				</template>
				<view class="list-items flex ac flex-wrap" :key="index" v-for="(item, index) in dataList"
					@click.stop="navToDetailFunc(item, index)">
					<view class="list-items-title flex ac jb" v-if="$fieldShowFunc('sj_xmmc')">
						<view class="title u-line-1">{{ item.project_name }}</view>
					</view>
					<view class="list-items-item flex ac list-items-item-width50" v-if="$fieldShowFunc('sj_xmbh')">
						<view class="title">项目编号</view>
						<view class="desc u-line-1">{{ item.project_number }}</view>
					</view>
					<view class="list-items-item flex ac list-items-item-width50" v-if="$fieldShowFunc('sj_xmlx')">
						<view class="title">项目类型</view>
						<view class="desc u-line-1">{{ item.store_type_name || '--' }}</view>
					</view>
					<view class="list-items-item flex ac list-items-item-width50" v-if="$fieldShowFunc('ys_zjy')">
						<view class="title">造价员</view>
						<view class="desc u-line-1">{{ item.cost_estimator_name || '--' }}</view>
					</view>
					<view class="list-items-item flex ac" v-if="$fieldShowFunc('ys_bjbh')">
						<view class="title">报价编号</view>
						<view class="desc u-line-1">{{ item.quotation_number || '--'}}</view>
					</view>
					<view class="list-items-item flex ac list-items-item-width50" v-if="$fieldShowFunc('ys_bjdzt')">
						<view class="title">报价单状态</view>
						<view class="desc u-line-1">
							<template v-if="item.quotation_status == 10">待报价</template>
							<template v-if="item.quotation_status == 20">待工程经理审核</template>
							<template v-if="item.quotation_status == 25">工程经理审核拒绝</template>
							<template v-if="item.quotation_status == 30">待造价主管审核</template>
							<template v-if="item.quotation_status == 35">造价主管审核拒绝</template>
							<template v-if="item.quotation_status == 40">待签约</template>
							<template v-if="item.quotation_status == 45">客户经理退回报价单</template>
							<template v-if="item.quotation_status == 50">已签约</template>
							<template v-if="item.quotation_status == 60">已取消</template>
						</view>
					</view>
					<view class="list-items-item flex ac list-items-item-width50" v-if="$fieldShowFunc('ys_xmmj')">
						<view class="title">项目面积</view>
						<view class="desc u-line-1">
							{{ item.building_area ? item.building_area + '㎡' : '--' }}
						</view>
					</view>
					<view class="list-items-item flex ac list-items-item-width50" v-if="$fieldShowFunc('ys_cbje')">
						<view class="title">成本金额</view>
						<view class="desc u-line-1">
							{{ item.cost_amount ? item.cost_amount + '元' : '--' }}
						</view>
					</view>
					<!-- 按钮 -->
					<view style="width: 100%">
						<judgeBtn plain :per_arr="per_arr" :btns="btns" :state="item.status" :item="item" :idx="index"
							objectType="bj" @change="btnsChange"></judgeBtn>
					</view>
				</view>
			</z-paging>
		</view>
		<!-- 筛选弹窗 -->
		<u-popup :show="searchShow" round="30" @close="searchShow = false" closeable>
			<view class="search-popup-title">全部筛选</view>
			<scroll-view scroll-y class="search-popup-box">
				<view class="search-items">
					<view class="search-items-title flex ac jb">
						<text>项目类型</text>
						<view class="search-items-title-right flex ac jc" hover-class="hover-class"
							v-if="searchListObj.store_type_id.page != 1" @click="retractFunc('store_type_id')">
							<text class="txt">收起</text>
							<u-icon name="arrow-up" color="#A1A7B3" size="12"></u-icon>
						</view>
					</view>
					<view class="search-items-list flex ac flex-wrap">
						<view @click="searchSelectFunc('store_type_id', item)" class="search-items-list-item"
							:class="item.id == searchForm.store_type_id ? 'search-items-list-item-active' : ''"
							hover-class="hover-class" v-for="(item, index) in searchListObj.store_type_id.list" :key="index">
							{{ item.store_type_name }}
						</view>
						<view class="search-items-list-more flex ac jc" hover-class="hover-class"
							@click="lookMoreFunc('store_type_id')"
							v-if="searchListObj.store_type_id.list.length != searchListObj.store_type_id.max">
							<text class="txt">查看更多</text>
							<u-icon name="arrow-down" color="#A1A7B3" size="12"></u-icon>
						</view>
					</view>
				</view>
				<view class="search-items">
					<view class="search-items-title flex ac jb">
						<text>造价员</text>
						<view class="search-items-title-right flex ac jc" hover-class="hover-class"
							v-if="searchListObj.cost_estimator_id.page != 1" @click="retractFunc('cost_estimator_id')">
							<text class="txt">收起</text>
							<u-icon name="arrow-up" color="#A1A7B3" size="12"></u-icon>
						</view>
					</view>
					<view class="search-items-list flex ac flex-wrap">
						<view @click="searchSelectFunc('cost_estimator_id', item)" class="search-items-list-item"
							:class="item.id == searchForm.cost_estimator_id ? 'search-items-list-item-active' : ''"
							hover-class="hover-class" v-for="(item, index) in searchListObj.cost_estimator_id.list" :key="index">
							{{ item.name }}
						</view>
						<view class="search-items-list-more flex ac jc" hover-class="hover-class"
							@click="lookMoreFunc('cost_estimator_id')"
							v-if="searchListObj.cost_estimator_id.list.length != searchListObj.cost_estimator_id.max">
							<text class="txt">查看更多</text>
							<u-icon name="arrow-down" color="#A1A7B3" size="12"></u-icon>
						</view>
					</view>
				</view>
				<view class="search-items">
					<view class="search-items-title flex ac jb">
						<text>报价单状态</text>
						<view class="search-items-title-right flex ac jc" hover-class="hover-class"
							v-if="searchListObj.quotation_status.num != 5" @click="retractFunc('quotation_status')">
							<text class="txt">收起</text>
							<u-icon name="arrow-up" color="#A1A7B3" size="12"></u-icon>
						</view>
					</view>
					<view class="search-items-list flex ac flex-wrap">
						<template v-for="(item, index) in searchListObj.quotation_status.list">
							<view :key="index" v-if="index < searchListObj.quotation_status.num"
								@click="searchSelectFunc('quotation_status', item)" class="search-items-list-item u-line-1"
								:class="item.value == searchForm.quotation_status ? 'search-items-list-item-active' : ''"
								hover-class="hover-class">
								{{ item.label }}
							</view>
						</template>
						<view class="search-items-list-more flex ac jc" hover-class="hover-class"
							@click="lookMoreFunc('quotation_status')" v-if="searchListObj.quotation_status.num == 5">
							<text class="txt">查看更多</text>
							<u-icon name="arrow-down" color="#A1A7B3" size="12"></u-icon>
						</view>
					</view>
				</view>
				<view class="search-items">
					<view class="search-items-title flex ac jb">
						<text>施工工程经理</text>
						<view class="search-items-title-right flex ac jc" hover-class="hover-class"
							v-if="searchListObj.engineering_manager_id.page != 1" @click="retractFunc('engineering_manager_id')">
							<text class="txt">收起</text>
							<u-icon name="arrow-up" color="#A1A7B3" size="12"></u-icon>
						</view>
					</view>
					<view class="search-items-list flex ac flex-wrap">
						<view @click="searchSelectFunc('engineering_manager_id', item)" class="search-items-list-item"
							:class="searchForm.engineering_manager_id == item.id ? 'search-items-list-item-active' : ''"
							hover-class="hover-class" v-for="(item, index) in searchListObj.engineering_manager_id.list" :key="index">
							{{ item.name }}
						</view>
						<view class="search-items-list-more flex ac jc" hover-class="hover-class"
							@click="lookMoreFunc('engineering_manager_id')"
							v-if="searchListObj.engineering_manager_id.list.length != searchListObj.engineering_manager_id.max">
							<text class="txt">查看更多</text>
							<u-icon name="arrow-down" color="#A1A7B3" size="12"></u-icon>
						</view>
					</view>
				</view>
				<view class="search-items">
					<view class="search-items-title">项目面积</view>
					<u--input placeholder="项目面积" type="number" border="surround" v-model="searchForm.building_area"></u--input>
				</view>
			</scroll-view>
			<view class="btn-box flex ac jb">
				<u-button @click="reSearchValFunc" text="重置"
					customStyle="width: 248rpx;height: 82rpx;background: #242834;border-radius: 12rpx;font-weight: 500;font-size: 30rpx;color: #FFFFFF;"></u-button>
				<u-button @click="searchFunc" text="查询"
					customStyle="width: 422rpx;height: 82rpx;background: #3B75FF;border-radius: 12rpx;font-weight: 500;font-size: 30rpx;color: #FFFFFF;"></u-button>
			</view>
		</u-popup>

		<budgetManagement :value.sync="per_name" :oper_item="oper_item" @submit="handleSubmit"></budgetManagement>
	</view>
</template>

<script>
	export default {
		name: '',
		props: {
			conentHeight: {
				default: 0
			},
			option: {
				type: Object,
				default: {}
			}
		},
		provide() {
			return {
				providedData: this.btns
			};
		},
		data() {
			return {
				per_arr: [],
				btns: [{
						per_name: 'preSettlement_addZjy',
						state: 1070,
						name: '分配造价员'
					},
					{
						per_name: 'budget_shbjd',
						state: 1090,
						name: '报价单初审'
					},
					{
						per_name: 'preSettlement_reexamine',
						state: 1092,
						name: '报价单复审'
					},
					{
						per_name: 'preSettlement_editZjy',
						func: (item) => {
							if (item.cost_estimator_name) {
								return true;
							} else {
								return false;
							}
						},
						name: '更换造价员'
					},
				],
				oper_item: {},
				per_name: '',
				oper_idx: '',

				searchShow: false,
				dataList: [],
				searchForm: {
					project_name: '',
					store_type_id: '',
					cost_estimator_id: '',
					quotation_status: '',
					engineering_manager_id: '',
					building_area: ''
				},
				topHeight: 0,
				searchListObj: {
					store_type_id: {
						list: [],
						page: 1,
						num: 5,
						max: 0
					},
					cost_estimator_id: {
						list: [],
						page: 1,
						num: 5,
						max: 0
					},
					quotation_status: {
						list: [{
								label: '待报价',
								value: 10
							},
							{
								label: '待工程经理审核',
								value: 20
							},
							{
								label: '工程经理审核拒绝',
								value: 25
							},
							{
								label: '待造价主管审核',
								value: 30
							},
							{
								label: '造价主管审核拒绝',
								value: 35
							},
							{
								label: '待签约',
								value: 40
							},
							{
								label: '客户经理退回报价单',
								value: 45
							},
							{
								label: '已签约',
								value: 50
							},
							{
								label: '已取消',
								value: 60
							}
						],
						page: 1,
						num: 5,
						max: 0
					},
					engineering_manager_id: {
						list: [],
						page: 1,
						num: 5,
						max: 0
					}
				}
			};
		},
		mounted() {
			this.getStoreTypeList();
			this.getAdminList_();
			this.getEngineeringManager();
			this.getHeight();

			// 获取权限
			this.$Api.getHtmlAuthority({
				path: '/budgetManagement'
			}).then((res) => {
				console.log(res, 'getHtmlAuthority');
				if (res.code == 200) {
					this.per_arr = res.data.permission;
				}
			});
		},
		watch: {},
		methods: {
			// 重置弹窗筛选项
			reSearchValFunc() {
				this.searchForm = {
					project_name: '',
					store_type_id: '',
					cost_estimator_id: '',
					quotation_status: '',
					engineering_manager_id: '',
					building_area: ''
				};
				this.$nextTick(() => {
					this.searchFunc();
				});
			},
			// 刷新列表
			searchFunc() {
				this.$refs.paging.reload();
				this.searchShow = false;
			},
			getHeight() {
				// 创建节点查询
				let that = this;
				const systemInfo = uni.getSystemInfoSync();
				const query = uni.createSelectorQuery().in(that);
				query.select('.top-height').boundingClientRect();
				query.exec((res) => {
					that.topHeight = res[0].height + systemInfo.statusBarHeight + 20;
				});
			},
			// 去详情
			navToDetailFunc(item, index) {
				this.oper_idx = index;
				uni.navigateTo({
					url: '/pagesB/budgetManagementDetail/budgetManagementDetail?id=' + item.id
				});
			},
			queryList(page, num) {
				this.getBudgetList(page, num);
			},
			// 获取预算列表
			getBudgetList(page, num) {
				uni.showLoading({
					mask: true
				});
				let searchForm = this.searchForm;
				this.$Apipc
					.getBudgetList({
						page,
						num,
						project_name: searchForm.project_name,
						store_type_id: searchForm.store_type_id,
						cost_estimator_id: searchForm.cost_estimator_id,
						quotation_status: searchForm.quotation_status,
						engineering_manager_id: searchForm.engineering_manager_id,
						building_area: searchForm.building_area
					})
					.then((res) => {
						uni.hideLoading();
						console.log(res, '预算列表');
						if (res.code == 200) {
							this.$refs.paging.complete(res.data.list);
						}
					});
			},
			// 弹窗筛选项
			searchSelectFunc(type, item) {
				console.log(type, item);
				switch (type) {
					case 'store_type_id':
						this.searchForm[type] = this.searchForm[type] == item.id ? '' : item.id;
						break;
					case 'cost_estimator_id':
						this.searchForm[type] = this.searchForm[type] == item.id ? '' : item.id;
						break;
					case 'quotation_status':
						this.searchForm[type] = this.searchForm[type] == item.value ? '' : item.value;
						break;
					case 'engineering_manager_id':
						this.searchForm[type] = this.searchForm[type] == item.id ? '' : item.id;
						break;
					default:
				}
			},
			// 弹窗筛选项查看更多
			lookMoreFunc(type) {
				switch (type) {
					case 'store_type_id':
						this.searchListObj.store_type_id.page += 1;
						this.getStoreTypeList();
						break;
					case 'cost_estimator_id':
						this.searchListObj.cost_estimator_id.page += 1;
						this.getAdminList_();
						break;
					case 'quotation_status':
						this.searchListObj.quotation_status.num = 999;
						break;
					case 'engineering_manager_id':
						this.searchListObj.engineering_manager_id.page += 1;
						this.getEngineeringManager();
						break;
					default:
				}
			},
			// 弹窗筛选项列表收起
			retractFunc(type) {
				switch (type) {
					case 'store_type_id':
						this.searchListObj.store_type_id.page = 1;
						this.getStoreTypeList();
						break;
					case 'cost_estimator_id':
						this.searchListObj.cost_estimator_id.page = 1;
						this.getAdminList_();
						break;
					case 'quotation_status':
						this.searchListObj.quotation_status.num = 5;
						break;
					case 'engineering_manager_id':
						this.searchListObj.engineering_manager_id.page = 1;
						this.getEngineeringManager();
						break;
					default:
				}
			},
			// 门店类型列表(项目类型)
			getStoreTypeList() {
				this.$Apipc
					.getStoreTypeList({
						page: this.searchListObj.store_type_id.page,
						num: this.searchListObj.store_type_id.num
					})
					.then((res) => {
						console.log(res, '门店类型列表');
						if (res.code == 200) {
							if (this.searchListObj.store_type_id.page == 1) {
								this.searchListObj.store_type_id.list = [];
							}
							this.searchListObj.store_type_id.list = [...this.searchListObj.store_type_id.list, ...res.data.list];
							this.searchListObj.store_type_id.max = res.data.max;
						}
					});
			},
			// 造价员列表
			getAdminList_() {
				this.$Apipc
					.getAdminList({
						page: this.searchListObj.cost_estimator_id.page,
						num: this.searchListObj.cost_estimator_id.num,
						identity: 1,
						position_id_arr: [5]
					})
					.then((res) => {
						console.log(res, '造价员列表');
						if (res.code == 200) {
							if (this.searchListObj.cost_estimator_id.page == 1) {
								this.searchListObj.cost_estimator_id.list = [];
							}
							this.searchListObj.cost_estimator_id.list = [...this.searchListObj.cost_estimator_id.list, ...res.data
								.list
							];
							this.searchListObj.cost_estimator_id.max = res.data.max;
						}
					});
			},
			// 工程经理
			getEngineeringManager() {
				var obj = {
					page: this.searchListObj.engineering_manager_id.page,
					num: this.searchListObj.engineering_manager_id.num,
					keyword: '',
					province_id: '',
					city_id: '',
					county_id: '',
					identity: 2,
					position_id_arr: [7]
				};
				this.$Apipc
					.getAdminList(obj)
					.then((res) => {
						console.log(res, '工程经理');
						if (res.code == 200) {
							if (this.searchListObj.engineering_manager_id.page == 1) {
								this.searchListObj.engineering_manager_id.list = [];
							}
							this.searchListObj.engineering_manager_id.list = [...this.searchListObj.engineering_manager_id.list, ...
								res.data.list
							];
							this.searchListObj.engineering_manager_id.max = res.data.max;
						}
					})
					.catch((err) => {});
			},

			// 操作按钮触发点击
			btnsChange(e) {
				console.log(e, 'xxxsww');

				this.oper_item = e.item;
				this.oper_idx = e.index;
				switch (e.per_name) {
					// 更换造价员
					case 'preSettlement_editZjy':
						this.per_name = e.per_name;
						break;
						// 分配造价员
					case 'preSettlement_addZjy':
						this.per_name = e.per_name;
						break;
					default:
						uni.navigateTo({
							url: '/pagesB/budgetManagementDetail/budgetManagementDetail?id=' + e.item.id
						});
						break;
				}
			},
			handleSubmit(type) {
				this.updateListIdx();
			},
			updateListIdx() {
				console.log('来了 老弟');
				let idx = this.oper_idx.toString();
				if (idx) {
					let item = this.dataList[idx]
					this.$Apipc.getBudgetDetails({
						project_id: item.id
					}).then((res) => {
						console.log(res, '预算管理详情');
						if (res.code == 200) {
							let info = res.data
							info.quotation_number = res.data.quotation.quotation_number
							info.building_area = res.data.quotation.building_area
							info.cost_amount = res.data.quotation.cost_amount

							this.dataList[idx] = res.data
							this.dataList.splice(0, 0)
						}
					});
				}
			},
		}
	};
</script>

<style lang="scss"></style>